<template>




            <!--            筛选部分    ===================================================================================================================-->

            <div style="margin: 10px 0">
                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="8"></el-col>
                    <el-col :span="8"><!-- 关键字 -->
                        <el-input placeholder="请输入内容关键字" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.searchContent" clearable :prefix-icon="Search"></el-input>
                    </el-col>
                    <el-col :span="8"></el-col>
                </el-row>

                <div style="margin: 10px 0">
                    <el-button class="el-icon-circle-plus-outline" type="primary" @click="getList(reqParam)">搜索</el-button>
                    <el-button class="el-icon-circle-plus-outline" type="primary" @click="resetCondition()">重置筛选条件</el-button>
                    <el-button class="el-icon-circle-plus-outline" type="primary" @click="addNewPost()">发布新帖</el-button>
                </div>
            </div>

            <!--            数据展示部分    ===================================================================================================================-->

    <div>
        <ul>
            <li v-for="item in dataList" class="cardLi">
                <div class="cardBored">

                    <el-row :gutter="20" style="height: 35px">
                        <el-col :span="2">头像</el-col>
                        <el-col :span="4">{{ item.creatorName }}</el-col>
                        <el-col :span="2">
                            <el-tag type="warning" size="default">
                                {{ typeMap.get(item.type) }}
                            </el-tag>
                        </el-col>
                        <el-col :span="14" style="float: right">
                            <el-tag style="margin-left: 3px" v-for="tag in item.tagList" size="small" type="success">
                                {{ tag.name }}
                            </el-tag>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="height: 35px">
                        <el-col :span="24">
                            <a class="linkStyle" @click="toDetail(item.id)">
                                {{ item.title }}
                            </a>
                        </el-col>

                    </el-row>
                    <el-row :gutter="20" style="height: 35px">
                        <el-col :span="2"></el-col>
                        <el-col :span="16">{{ getSimple(item.content) }}</el-col>
                        <el-col :span="6">{{ item.gmtCreateTime }}</el-col>
                    </el-row>

                </div>
            </li>
        </ul>
    </div>



        <el-container>
            <!--            分页工具    ===================================================================================================================-->
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeList"
                    :small="true"
                    :disabled="false"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="float: right; margin-bottom: 10px"
                    @size-change="handleSizeChange()"
                    @current-change="handleCurrentChange()"
                    hide-on-single-page
                />
            </div>
        </el-container>




</template>

<script setup>
import {getPostList, logicRemove} from "@/api/request";
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import router from "@/api/routerConfig";



const id = ref("")
const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const typeMap = ref(new Map([
    ['1', "求助"],
    ['2', "教程"],
    ['3', "讨论"],
    ['4', "分享"],
    ['5', "其他"]
]))
const statusMap = ref(new Map([
    ['0', "未提交"],
    ['1', "待审核"],
    ['2', "已发布"],
    ['3', "被驳回"],
    ['4', "已屏蔽"]
]))

const reqParam = ref({
    pageNum: 1,
    pageSize: 20,
    selectList: [],
    searchContent:"",
    status: "2"
})


function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}

async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let resp = await getPostList(req, "/post/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}
function resetCondition() {
    reqParam.value = {
        id: "",
        title: "",
        type: "",
        content: "",
        tagIds: "",
        fileUrls: "",
        status: "",
        backReason: "",
        pageNum: 1,
        pageSize: 20,
        selectList: [],
        searchContent:"",
        creatorInfo: ""
    }
    getList(reqParam)
}

function addNewPost() {
  router.push({
    name: "postEdit",
    params: {}
  }, "/index")
}

function toDetail(index) {
    router.push({
        name: "postDetailWeb",
        params: {
            id: index
        }
    }, "/")
}

function handleEdit(index) {
    console.log(index)
    router.push({
        name: "postDetail",
        params: {
            id: index
        }
    })

}

async function handleDelete(index) {
    console.log(index)
    await logicRemove(index, "/post/remove")

}

const dataList = ref([])

function getSimple(req) {
    if (req != null && req.length > 20) {
        return req.substring(1, 20) + "........"
    }
    return req
}

</script>




<style scoped>

.cardLi {
    list-style: none;
    height: auto;
}
.cardBored {
    background-color: gainsboro;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    height: auto;

}

.selectInput {
    margin: 10px;
    width: 100%;
    height: 65%;
}

.block:last-child {
    border-right: none;
}
.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-pagination-block +  {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}
.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.demo-datetime-picker .block:last-child {
    border-right: none;
}
.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

</style>